<link rel="stylesheet" href="/Static/mobile/vant/index.css">
<script src="/Static/mobile/vant/vue.min.js"></script>
<script src="/Static/mobile/vant/vant.min.js"></script>
<div id="app">
    <van-panel title="请选择代理等级" >
        <!-- <div style="padding:1em;">内容</div> -->
    </van-panel>
   <!--  <div style="margin:1em auto;text-align: center;">
        我同意<a target="_blank" href="http://so.com">代理协议</a> <input v-model="checked" type="checkbox"/>
    </div> -->

    <van-cell-group>
        <van-cell is-link>
            <template slot="title">
                <span class="van-cell-text">等级</span>
            </template>
            <template>
                <select style="width:100%;"  v-model="applyData.grade_id">
                    <option value="0">请选择等级</option>
                    <option :value="item.grade_id" v-for="item in gradeArr">{{item.grade_name}}</option>
                </select>
            </template>
        </van-cell>

        <van-cell is-link>
            <template slot="title">
                <span class="van-cell-text">省</span>
            </template>
            <template>
                <select style="width:100%;" v-model="applyData.province" id="province">
                </select>
            </template>
        </van-cell>
        <van-cell is-link>
            <template slot="title">
                <span class="van-cell-text">市</span>
            </template>
            <template>
                <select style="width:100%;" v-model="applyData.city" id="city" name="user_city">
                </select>
            </template>
        </van-cell>
        <van-cell is-link>
            <template slot="title">
                <span class="van-cell-text">区/县</span>
            </template>
            <template>
                <select style="width:100%;" v-model="applyData.county" id="county" name="user_county">
                </select>
            </template>
        </van-cell>
    </van-cell-group>

    <div style="padding:1em 1em 1em 1em;">
        <van-button @click="confirm" block size="normal"  type="primary">立即申请</van-button>
    </div>


</div>
<script src="__STATIC__mobile/js/areadata.js"></script>
<script>
var city = new Object;
city.getcity = function(pname,cname,oname,vprovince,vcity,vcounty,def,string){
	city.pname = pname;
	city.cname = cname;
	city.oname = oname;	
	city.vprovince = vprovince;
	city.vcity = vcity;
	city.vcounty = vcounty;	
	city.def = def;	
	city.string = string;
    city.setProvince();
    $("#"+city.pname).change(function(){city.setCity()});
    $("#"+city.cname).change(function(){city.setCounty()});  	
}
city.setProvince = function(){
	if(city.def==1) $("#"+city.pname).append("<option value='' aid='-100' selected>您所在的省份</option>");	
	if(city.string!=null){
	  if(city.string==city.vprovince){
	    $("#"+city.pname).append("<option value='"+city.string+"' aid='-10000' selected>"+city.string+"</option>");	
	  }else{
        $("#"+city.pname).append("<option value='"+city.string+"' aid='-10000'>"+city.string+"</option>");	 
	  }
	} 
    $.each(dsy['parent_id_0'], function(i, item) {
	 if(item['area_name']==city.vprovince){
	  $("#"+city.pname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"' selected>"+item['area_name']+"</option>");
	 }else{
      $("#"+city.pname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"'>"+item['area_name']+"</option>"); 
	 }
	});
    city.setCity();
}
city.setCity = function(){
   $("#"+city.cname).empty();
   if(city.def==1) $("#"+city.cname).append("<option value='' aid='-100' selected>您所在的城市</option>");
   if($("#"+city.pname).find("option:selected").attr('aid')>0){
     $.each(dsy['parent_id_'+$("#"+city.pname).find("option:selected").attr('aid')], function(i, item) {
	   if(item['area_name']==city.vcity){
        $("#"+city.cname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"' selected>"+item['area_name']+"</option>"); 
	   }else{
        $("#"+city.cname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"'>"+item['area_name']+"</option>"); 
	   }		 		
     });
   }
   city.setCounty();
}
city.setCounty = function(){
   $("#"+city.oname).empty();
   if(city.def==1) $("#"+city.oname).append("<option value='' aid='-100' selected>您所在的区县</option>");	
   if($("#"+city.cname).find("option:selected").attr('aid')>0){
     $.each(dsy['parent_id_'+$("#"+city.cname).find("option:selected").attr('aid')], function(i, item) {
	   if(item['area_name']==city.vcounty){
        $("#"+city.oname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"' selected>"+item['area_name']+"</option>"); 
	   }else{
        $("#"+city.oname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"'>"+item['area_name']+"</option>"); 
	   }	     	  
     });
   }
}
// JavaScript Document
var acity = new Object;
acity.getcity = function(pname,cname,oname,vprovince,vcity,vcounty,def,string){
	acity.pname = pname;
	acity.cname = cname;
	acity.oname = oname;	
	acity.vprovince = vprovince;
	acity.vcity = vcity;
	acity.vcounty = vcounty;	
	acity.def = def;	
	acity.string = string;
    acity.setProvince();
    $("#"+acity.pname).change(function(){acity.setCity()});
    $("#"+acity.cname).change(function(){acity.setCounty()});  	
}
acity.setProvince = function(){
	if(acity.def==1) $("#"+acity.pname).append("<option value='' aid='-100' selected>您所在的省份</option>");	
	if(acity.string!=null){
	  if(acity.string==acity.vprovince){
	    $("#"+acity.pname).append("<option value='"+acity.string+"' aid='-10000' selected>"+acity.string+"</option>");	
	  }else{
        $("#"+acity.pname).append("<option value='"+acity.string+"' aid='-10000'>"+acity.string+"</option>");	 
	  }
	} 
    $.each(dsy['parent_id_0'], function(i, item) {
	 if(item['area_name']==acity.vprovince){
	  $("#"+acity.pname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"' selected>"+item['area_name']+"</option>");
	 }else{
      $("#"+acity.pname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"'>"+item['area_name']+"</option>"); 
	 }
	});
    acity.setCity();
}
acity.setCity = function(){
   $("#"+acity.cname).empty();
   if(acity.def==1) $("#"+acity.cname).append("<option value='' aid='-100' selected>您所在的城市</option>");
   if($("#"+acity.pname).find("option:selected").attr('aid')>0){
     $.each(dsy['parent_id_'+$("#"+acity.pname).find("option:selected").attr('aid')], function(i, item) {
	   if(item['area_name']==acity.vcity){
        $("#"+acity.cname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"' selected>"+item['area_name']+"</option>"); 
	   }else{
        $("#"+acity.cname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"'>"+item['area_name']+"</option>"); 
	   }		 		
     });
   }
   acity.setCounty();
}
acity.setCounty = function(){
   $("#"+acity.oname).empty();
   if(acity.def==1) $("#"+acity.oname).append("<option value='' aid='-100' selected>您所在的区县</option>");	
   if($("#"+acity.cname).find("option:selected").attr('aid')>0){
     $.each(dsy['parent_id_'+$("#"+acity.cname).find("option:selected").attr('aid')], function(i, item) {
	   if(item['area_name']==acity.vcounty){
        $("#"+acity.oname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"' selected>"+item['area_name']+"</option>"); 
	   }else{
        $("#"+acity.oname).append("<option value='"+item['area_name']+"' aid='"+item['area_id']+"'>"+item['area_name']+"</option>"); 
	   }	     	  
     });
   }
}
</script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            showDialog: false,
            checked: true,
            applyData: {
                type: 2,
                grade_id: 0
            },
            gradeArr: JSON.parse('<?=json_encode($gradeArr)?>')
        },
        created: function () {
        },
        mounted: function () {
            city.getcity('province', 'city', 'county', '', '', '', 1);
        },
        methods: {
            confirm: function () {
                var self = this;
                console.log(this.applyData)
                this.$dialog.confirm({
                    title: '确定申请吗?',
                    message: ''
                }).then(() => {
                    // on confirm
                    $.ajax({
                        type: 'post',
                        url: '/mobile/cart/apply',
                        data: self.applyData
                    }).then(function (res) {
                        if(res.ret==1) {
                            showerror(res.msg);
                        }else{
                            showsuccess(res.msg);
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
                
            }
        }
    })
</script>
